<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>lable</title>
  <script src="./vue/vue.js"></script>
</head>
<body>
<div id="mod">
  请输入年龄：<input v-model="age"/><br>
  当前年龄是：{{sum}}<br>
<!--  v-pre让该指令会跳过所在元素和它的子元素的编译过程，也就是把这个节点及其子节点当作一个静态节点来处理 -->
  <p v-pre>{{sum}}</p>
<!--模板只会在第一次更新时显示数据，此后再次更新该 DOM 里面引用的数据时，内容不会自动更新。-->
 <p v-once> 当前年龄是：{{sum}}</p>
  请输入第二个年龄:<input v-model="age2"/><br>
  <a href="#" v-on:click="j">单击计算两者之间的和</a><br>
  <a href="#" v-on:click="ss">查看总和年龄</a>
</div>
<script>
  var sa = new Vue({
    el: '#mod',
    data :{
      age: 10,
      age2: 11,
      sum: 0
    },
    methods: {
      j() {
this.sum=parseInt(this.age)+parseInt(this.age2)
      },
      ss(){
        alert(this.sum)
      }
    }
  });
</script>
</body>
</html>
